import React, { createContext, useState } from 'react';
import { ActivityIndicator, Alert, Button, Dimensions, Platform, SafeAreaView, StatusBar, StyleSheet, Switch, Text, View } from 'react-native';

//点击事件练习 loadging框
const ActivityindicatorPage = () => {

    const [hideStatusBar, setHideStatusBar] = useState(false)

    const isOs = () => {
        if (Platform.OS === "android") {
            Alert.alert('设备是Android')
        } else if (Platform.OS === 'ios') {
            Alert.alert('设备是iOS')
        }
    }

    return (
        <View style={[styles.root]}>

            {/* 顶部状态栏 */}
            <StatusBar
                hidden={false}   //隐藏状态栏
                backgroundColor={"#FF0000"}     //仅在Android设备有效
                barStyle={hideStatusBar ? 'dark-content' : "light-content"}       //状态栏字体部件颜色
            />

            <ActivityIndicator
                color={"#FF0000"}
                size={'large'}
            />
            <ActivityIndicator
                color={"#666666"}
                size={'small'}
            />
            <ActivityIndicator
                color={"#999999"}
                size={70}
            />
            <ActivityIndicator
                color={"#333333"}
                size={70}
            />
            <Button title='判断设备'
                onPress={() => {
                    isOs()
                }}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    root: {
        justifyContent: "center",
        alignItems: "center",
        height: Dimensions.get('window').height
    }
})

export default ActivityindicatorPage;
